<template>
    <div class="head">
        <div @click="show = !show">{{username}}</div>
        <transition
                name="custom-classes-transition"
                enter-active-class="animated fadeInRight"
                leave-active-class="animated fadeOutRight"
                :duration="1000"
        >
            <div class="search" v-if="show">
            </div>
        </transition>
    </div>
</template>

<script>
    export default{
        props:['username'],
        name: 'head',
        data () {
            return {
                show:true,
                msg: 'head'
            }
        },
    }
</script>

<style>
    .head{
        width: 100%;
        height: 100%;
    }
    .search{
        width: 100%;
        height: 100%;
        z-index: 1;
    }
</style>